<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    input {
      height: 40px;
      width: 90%;
    }
  </style>
</head>

<body>
  <!-- 
        处理滑屏误触问题
     -->

  <div class="page">
    <ul class="list"></ul>
  </div>

  <script>
    var inner = '';
    var list = document.querySelector('.list');
    var input = document.querySelector('input');
    for (let i = 0; i < 50; i++) {
      inner += `<li><a href="www.baidu.com">第${i}个li</a></li>`
    }
    list.innerHTML = inner;

    var page = document.querySelector('.page');
    page.addEventListener('touchstart', function(e) {
      e.preventDefault();
    });
    var a = document.querySelectorAll('a');
    for (let ii = 0; ii < a.length; ii++) {
      tap(a[ii], function () {
        window.location.href = this.href;
      });
    }

    /*
      el,
      fn
    */
    /*
      在手指离开时 判断元素有没有发生move事件,如果没有发生move事件
      我们就认定用户要操作的是一个tap事件
    */
    function tap(el, fn) {
      var isMove = false;
      el.addEventListener('touchmove', function(e) {
        isMove = true;
      });
      el.addEventListener('touchend', function (e) {
        if (!isMove) {
          fn && fn.call(el);
        };
        isMove = false;
      });
    }
  </script>

</body>

</html>